<template>
	<div class="me-page">
		<!-- 个人资料卡片 -->
		<el-card class="information-card card" shadow="hover">
			<template #header>
				<div class="card-header">
					<div class="card-header-title">个人资料</div>
					<el-button type="primary" @click="showChangePasswordDialog = true">修改密码</el-button>
					<el-button type="primary" @click="showModifyInfoDialog = true">修改资料</el-button>
				</div>
			</template>
			<el-descriptions :column="2" size="large" :border="true">
				<el-descriptions-item align="center">
					<template #label>
						<div class="label">
							<el-icon>
								<User />
							</el-icon>
							用户名
						</div>
					</template>
					{{ currentUser.data.username }}
				</el-descriptions-item>
				<el-descriptions-item align="center">
					<template #label>
						<div class="label">
							<el-icon>
								<Clock />
							</el-icon>
							年龄
						</div>
					</template>
					{{ currentUser.data.age }}
				</el-descriptions-item>
				<el-descriptions-item align="center">
					<template #label>
						<div class="label">
							<el-icon>
								<Male />
							</el-icon>
							性别
						</div>
					</template>
					{{ currentUser.data.gender }}
				</el-descriptions-item>
				<el-descriptions-item align="center">
					<template #label>
						<div class="label">
							<el-icon>
								<Reading />
							</el-icon>
							职业
						</div>
					</template>
					<el-tag>{{ currentUser.data.job }}</el-tag>
				</el-descriptions-item>

			</el-descriptions>
		</el-card>
		<!-- 我的订单卡片 -->
		<!-- 包含房间订单与餐饮订单 -->
		<el-card class="order-card card" shadow="hover">
			<template #header>
				<div class="card-header">
					<div class="card-header-title">我的订单</div>
					<el-button @click="showOrder()">点击显示订单</el-button>
					<el-table :data="tableData" style="width: 100%">
            <el-table-column prop="roomId" label="ID" />
            <el-table-column prop="roomName" label="房名" />
            <el-table-column prop="roomType" label="房间类型" />
            <el-table-column prop="roomPrice" label="房间价格" />
        </el-table>
				</div>
			</template>
		</el-card>
		<!--虚拟钥匙-->
		<el-card class="service-card card" shadow="hover">
			<template #header>
				<div class="card-header">
					<div class="card-header-title">虚拟钥匙</div>
                    <el-button text :icon="Key" @click="open">打开房间门</el-button>
				</div>
			</template>
		</el-card>
		<!--房间灯光-->
		<el-card class="service-card card" shadow="hover">
			<template #header>
				<div class="card-header">
				</div>
			</template>
			<div class="card-header-title">房间灯光</div>
			<el-table>
				<el-table-column prop="toliet" label="卫生间" >
					<template >
						<el-button :icon="SwitchButton">打开卫生间灯光</el-button>
					</template>
			     </el-table-column>
				 <el-table-column prop="toliet" label="客厅" >
					<template >
						<el-button :icon="SwitchButton" type="plain">打开客厅大灯</el-button>
					</template>
			     </el-table-column>
				 <el-table-column prop="toliet" label="卧室" >
					<template >
						<el-button :icon="SwitchButton">打开卧室床头灯</el-button>
					</template>
			     </el-table-column>
				 <el-table-column prop="toliet" label="阳台" >
					<template >
						<el-button :icon="SwitchButton">打开阳台灯</el-button>
					</template>
			     </el-table-column>
				 




				    
					
					
					



			</el-table>
					
		</el-card>
		<!--退房-->
		<el-card class="service-card card" shadow="hover">
			<template #header>
				<div class="card-header">
					<div class="card-header-title">退房</div>
                    <el-button text :icon="Key" @click="open">打开房间门</el-button>
				</div>
			</template>
		</el-card>
		
		
        




		<!-- 修改密码对话框 -->
		<el-dialog v-model="showChangePasswordDialog" title="修改密码" width="500px">
			<el-form ref="changePasswordFormRef" :model="changePasswordForm" :rules="formRule" label-width="100px"
				hide-required-asterisk>
				<el-form-item label="原密码" prop="origin">
					<el-input v-model="changePasswordForm.origin" type="password" />
				</el-form-item>
				<el-form-item label="新密码" prop="newPass">
					<el-input v-model="changePasswordForm.newPass" type="password" />
				</el-form-item>
				<el-form-item label="重复新密码" prop="repeat">
					<el-input v-model="changePasswordForm.repeat" type="password" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showChangePasswordDialog = false">取消</el-button>
					<el-button type="primary" @click="handleChangePassword(changePasswordFormRef)">提交</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 修改资料对话框 -->
		<el-dialog v-model="showModifyInfoDialog" title="修改资料" width="500px">
			<el-form :model="currentUser.data" label-width="100px">
				<el-form-item label="头像" prop="avatar">
					<upload :emit-func="emitFunc" :avatar="avatar" />
				</el-form-item>
				<el-form-item label="用户名" prop="username">
					<el-input v-model="currentUser.data.username" placeholder="请输入用户名" />
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="currentUser.data.gender">
						<el-radio label="男" />
						<el-radio label="女" />
						<el-radio label="保密" />
					</el-radio-group>
				</el-form-item>
				<el-form-item label="年龄">
					<el-input v-model="currentUser.data.age" placeholder="请输入年龄" />
				</el-form-item>
				<el-form-item label="职业">
					<el-input v-model="currentUser.data.job" placeholder="请输入职业" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showModifyInfoDialog = false">取消</el-button>
					<el-button type="primary" @click="handleModifyInfo">提交</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
     <!-- 自我介绍 -->
	 <el-descriptions title="关于我们" :column="3" border>
    <el-descriptions-item
      label="酒店名"
      label-align="right"
      align="center"
      label-class-name="my-label"
      class-name="my-content"
      width="150px"
      >一整个爱住了</el-descriptions-item
    >
    <el-descriptions-item label="Telephone" label-align="right" align="center"
      >18100000000</el-descriptions-item
    >
    <el-descriptions-item label="Address" label-align="right" align="center"
      >和林格尔县内蒙古师范大学</el-descriptions-item
    >
    <el-descriptions-item label="code" label-align="right" align="center">
      <el-tag size="small">20191103225</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="me" label-align="right" align="center">
		张宇恒
      </el-descriptions-item
    >
  </el-descriptions>


</template>
<script setup lang="ts">
import { User, Clock, Male, Reading, SwitchButton,Key } from '@element-plus/icons-vue'
import { markRaw, onMounted, reactive, ref } from 'vue';
import { type FormRules, type FormInstance,type Action, ElMessage,ElMessageBox } from 'element-plus'
import { modifyInfo, logout, modifyPassword, getCurrentUserRole, getTolietLight, selectRoom } from '@/api'
import type { UserType,RoomType } from '@/types';

import currentUserStore from '@/stores/currentUserStore';
const loading = ref(false)
const showChangePasswordDialog = ref(false)
const showModifyInfoDialog = ref(false)
const changePasswordFormRef = ref<FormInstance>()
const changePasswordForm = reactive({
	origin: '',
	newPass: '',
	repeat: '',
})
const currentUser = reactive<{ data: UserType }>({
	data: currentUserStore().currentUser
})

const avatar = ref<string>()

const emitFunc = (filename: string) => {
	currentUser.data.avatar = filename
}
const checkPassword = (rule: any, value: any, callback: any) => {
	if (value === '') {
		callback(new Error('密码不可为空'))
	} else {
		if (changePasswordForm.repeat !== '') {
			if (!changePasswordFormRef.value) return
			changePasswordFormRef.value.validateField('repeat', () => null)
		}
		callback()
	}
}
const checkRepeatPassword = (rule: any, value: any, callback: any) => {
	if (value === '') {
		callback(new Error('请再输入一次密码'))
	} else if (changePasswordForm.repeat !== changePasswordForm.newPass) {
		callback(new Error("两次输入的密码不一致"))
	} else {
		callback()
	}
}
const formRule: FormRules = reactive({
	origin: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
	newPass: [
		{ validator: checkPassword, trigger: 'blur' }
	],
	repeat: [
		{ validator: checkRepeatPassword, trigger: 'blur' }
	]
})
const handleChangePassword = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	loading.value = true
	await formEl.validate((valid, fields) => {
		if (valid) {
			let currentUser = sessionStorage.getItem('currentUser')
			if (currentUser) {
				// 发送修改密码请求
				modifyPassword(
					JSON.parse(currentUser).id,
					changePasswordForm.origin,
					changePasswordForm.newPass
				).then((res: any) => {
					ElMessage.success(res.msg)
					logout().then((res: any) => {
						if (res.code === 200) {
							ElMessage.success(res.msg)
							location.replace('/')
							sessionStorage.removeItem('currentUser')
						}
					})
				})
			}
		}
	})
}
const handleModifyInfo = () => {
	modifyInfo(currentUser.data).then((res: any) => {
		if (res.code === 200) {
			ElMessage.success(res.msg)
			sessionStorage.setItem('currentUser', JSON.stringify(currentUser.data))
			showModifyInfoDialog.value = false
			location.reload()
		}
	})
}
//显示订单
const tableData= ref<RoomType[]>([])
const showOrder=()=>{
	console.log(currentUser.data.roomId!)
	selectRoom(currentUser.data.roomId!).then((res:any)=>{
		if(res.code==200){
			tableData.value=res.data
		}
	}) 
}
//虚拟钥匙
const openTheDoor=()=>{
}
//假
const open = () => {
ElMessage.success("已打开")
}






</script>


<style lang="less" scoped>
.me-page {
	width: 50%;
	margin: auto;

	.information-card {
		.label {
			display: flex;
			align-items: center;
			justify-content: center;

			i {
				margin-right: 5px;
			}
		}
	}
}

.card {
	margin-top: 40px;

	&-header {
		display: flex;
		align-items: center;

		&-title {
			flex: 1;
			font-size: 20px;
			font-weight: 700;
		}
	}
}

.my-label {
  background: var(--el-color-success-light-9);
}
.my-content {
  background: var(--el-color-danger-light-9);
}

</style>